vue+highcharts前后端交互 之 前端动态调用数据（饼图，柱形图） |
您所在的位置：网站首页 › element ui 饼图 › vue+highcharts前后端交互 之 前端动态调用数据（饼图，柱形图） |
vue+highcharts前后端交互 之 前端动态调用数据（饼图，柱形图）
|
前些天项目遇到了图表的开发，总结了一下流程，分享给大家 加载highcharts的流程不过多赘述，详情请看下方链接 Highcharts Vue教程 直接上代码 vue 图表布局 Test.vue import TestBingTu from "./TestBingTu"; import TestZhuXingTu from "./TestZhuXingTu"; export default { name: "Test", components: { TestBingTu, TestZhuXingTu }, data () { return { createValue: [], visible: false, visible1: false, labelCol: { xs: { span: 24 }, sm: { span: 5 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 } }, form: null, mdl: {}, sendId: "", // 高级搜索 展开/关闭 advanced: false, // 查询参数 queryParam: {}, selectedRowKeys: [], selectedRows: [] } } };vue 饼图功能实现 TestBingTu.vue import { Chart } from "highcharts-vue"; import Highcharts from 'highcharts' import exportingInit from 'highcharts/modules/exporting' exportingInit(Highcharts) import { getChartHazardType } from "@/api/hidden" export default { name: "ChartHazardType ", components: { highcharts: Chart }, data() { return { ser:[{ name: 'Chrome', y: 61.41, sliced: true, selected: true }, { name: 'Internet Explorer', y: 11.84 }, { name: 'Firefox', y: 10.85 }, { name: 'Edge', y: 4.67 }, { name: 'Safari', y: 4.18 }, { name: 'Sogou Explorer', y: 1.64 }, { name: 'Opera', y: 1.6 }, { name: 'QQ', y: 1.2 }, { name: 'Other', y: 2.61 }], chartOptions: { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: '种类分布' }, tooltip: { pointFormat: '{series.name}: {point.percentage:.1f}%' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, series: [{ name: '百分比', colorByPoint: true, data: [] //数据设为空即可，方法中动态赋值 }], credits: { enabled:false } } }; }, methods: { myCallback() { this.chartOptions.series[0].data= this.ser //此处可以为后台拼凑好的数据 } } };vue 柱形图功能实现 TestZhuXingTu.vue import { Chart } from "highcharts-vue"; import Highcharts from 'highcharts' import exportingInit from 'highcharts/modules/exporting' import { getChartHazardTypeUnit } from "@/api/hidden" exportingInit(Highcharts) export default { name: "ChartHazardTypeUnit", components: { highcharts: Chart }, data() { return { ser :[{ name: '管道', data: [5, 3, 4] }, { name: '管道1', data: [2, 2, 3] }, { name: '环境' ,data: [3, 4, 4] }], cate:['1', '2', '3'], chartOptions: { credits: { enabled:false }, chart: { type: 'column' }, title: { text: '种类分布' }, xAxis: { categories: []//数据动态赋值 }, yAxis: { min: 0, title: { text: '百分比' } }, tooltip: { pointFormat: '{series.name}: {point.y}' + '({point.percentage:.0f}%)', //:.0f 表示保留 0 位小数，详见教程：https://www.hcharts.cn/docs/basic-labels-string-formatting shared: true }, plotOptions: { column: { stacking: 'percent' } }, series: []//数据动态赋值 } }; }, methods: { myCallback() { this.chartOptions.xAxis.categories= this.cate this.chartOptions.series = this.ser } } };展示效果如下 以上是前端页面的赋值过程，java后台拼凑数据涉及到数据库的查询，有时间会持续更新。 如有写的不到位的地方欢迎各位大佬指正，我会虚心采纳 |
附加前后端交互时vue的动态调用代码【本文地址】
今日新闻 |
推荐新闻 |